<template>
  <el-container>
    <el-main>
      <el-form
        el-form
        ref="form"
        :model="searchList"
        label-width="80px"
        @submit.native.prevent
      >
        <el-row>
          <el-col :span="4">
            <el-form-item label="员工姓名">
              <el-input
                v-model="searchList.employeeName"
                @input="searchAllData"
                placeholder="根据员工姓名模糊搜索"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="searchList.employeeName ? searchedData : tableData"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="employeeName" label="员工名" width="120">
        </el-table-column>
        <el-table-column prop="monthCheck" label="本月考勤记录" width="120">
        </el-table-column>
        <el-table-column prop="workDayNum" label="本月工作日总数" width="120">
        </el-table-column>
        <el-table-column label="今日签到记录">
          <el-table-column prop="checkinTime" label="签到时间" width="200">
          </el-table-column>
          <el-table-column prop="checkoutTime" label="签退时间" width="200">
          </el-table-column>
          <el-table-column
            prop="dailyCheck"
            label="是否完成工作"
            width="120"
            :formatter="dailyCheckFormatter"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column label="修改今日签到记录">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click="updateSignIn(scope.$index, scope.row)"
              >准时签到</el-button
            >
            <el-button
              size="mini"
              type="primary"
              @click="updateSignOut(scope.$index, scope.row)"
              >准时签退</el-button
            >
          </template>
          <!-- <el-table-column label="选择" width="280">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                @click="handleEdit(scope.$index, scope.row)"
                >准时</el-button
              >
              <el-button
                size="mini"
                type="warning"
                @click="handleEdit(scope.$index, scope.row)"
                >迟到</el-button
              >
              <el-button
                size="mini"
                type="info"
                @click="handleEdit(scope.$index, scope.row)"
                >早退</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="手动修改">
            <template slot-scope="scope">
              <el-time-select
                style="margin-right: 5px"
                placeholder="签到时间"
                v-model="startTime[scope.$index]"
                :picker-options="{
                  start: '07:30',
                  step: '00:15',
                  end: '12:30',
                }"
              >
              </el-time-select>
              <em>--</em>
              <el-time-select
                style="margin-left: 5px"
                placeholder="签退时间"
                v-model="endTime[scope.$index]"
                :picker-options="{
                  start: '14:00',
                  step: '00:15',
                  end: '22:30',
                  minTime: startTime[scope.$index],
                }"
              >
              </el-time-select>
              <el-button
                style="margin-left: 10px"
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)"
                >修改</el-button
              >
            </template>
          </el-table-column> -->
        </el-table-column>
      </el-table>
    </el-main>

    <!-- 页脚分页 -->
    <div class="fenye">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[4, 8, 12, 16]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </el-container>
</template>

<script>
export default {
  name: "SignInInf",
  data() {
    return {
      allData: [], //后端返回的总数据
      tableData: [], //当前页的数据
      searchedData: [],
      page: 1, //页脚显示的当前页
      size: 8, //一页多少条数据
      total: 400, //总条目数
      multipleSelection: [], //当前选中的行
      searchList: {
        //搜索条件的
        employeeName: "",
      },
      startTime: [],
      endTime: [],
      formLabelWidth: "120px", //宽度
    };
  },
  methods: {
    //格式化今日签到记录
    dailyCheckFormatter(row) {
      if (row.dailyCheck == 0) {
        return "是";
      } else {
        return "否";
      }
    },
    searchAllData() {
      if (this.searchList.employeeName != "") {
        this.searchedData = [];
        var reg = new RegExp(this.searchList.employeeName);
        for (let i = 0; i < this.allData.length; i++) {
          if (this.allData[i].employeeName.match(reg)) {
            console.log(this.allData[i]);
            this.searchedData.push(this.allData[i]);
          }
        }
      }
    },
    //分页表格数据
    getTableData() {
      //allData为全部数据
      this.tableData = this.allData.slice(
        (this.page - 1) * this.size,
        this.page * this.size
      );
      this.total = this.allData.length; //总条目等于allDaTa长度
    },
    //size改变时的回调，参数为当前的size
    handleSizeChange(val) {
      // console.log("改变每页多少条，当前一页多少条", val);
      this.size = val;
      this.page = 1; //size改变时要把page重置为1，再把参数赋值给size，因为size改变会导致page数量改变
      this.getTableData();
    },
    //page改变时的回调函数，参数为当前页码
    handleCurrentChange(val) {
      // console.log("翻页，当前为第几页", val);
      this.page = val;
      this.getTableData();
    },
    reset() {
      this.getTableData();
      this.getAllSign();
    },
    //请求所有的薪资信息
    getAllSign() {
      this.$request.get("sign-in/queryAllAndName").then((res) => {
        // console.log(res);
        if (res.data.obj != null) {
          // console.log(res.data.obj);
          this.allData = res.data.obj;
          // console.log(this.allData);
          this.getTableData(); //获取信息后更新表单数据
        } else {
          this.$message.error("信息获取失败");
        }
      });
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
      this.selectionData = val;
      console.log(this.selectionData);
    },
    updateSignIn(index, row) {
      // console.log('row', row)
      let date = new Date(row.checkinTime)
      // console.log('date', date)
      if(date.getHours() >= 9 || row.checkinTime == null) {
        this.$request
        .get("sign-in/updateSignInByEmployeeId/" + row.employeeId)
        .then((res) => {
          if (res.data.obj == true) {
            this.$message.success("修改成功");
            this.reset();
          } else {
            this.$message.error("修改失败");
          }
        });
      }else{
        this.$message.info("该员工已经准时签到");
      }
    },
    updateSignOut(index, row) {
      let date = new Date(row.checkoutTime)
      if(date.getHours() < 17 || row.checkoutTime == null) {
        this.$request
        .get("sign-in/updateSignOutByEmployeeId/" + row.employeeId)
        .then((res) => {
          if ((res.data.obj == '修改成功')) {
            this.$message.success("修改成功");
            this.reset();
          } else {
            this.$message.error(res.data.obj);
          }
        });
      }else{
        this.$message.info("该员工已经准时签退");
      }
      
    },
    reset() {
      this.getTableData();
      this.getAllSign();
    },
  },
  mounted() {
    this.getTableData();
    this.getAllSign();
  },
};
</script>
<style scoped>
.el-header {
  background-color: rgb(42, 53, 66);
  color: #fff;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.el-row {
  margin-bottom: 10px;
}
#describe {
  height: 40px;
  /* text-align: center; */
  line-height: 40px;
  /* padding: auto; */
  color: #333;
}
.el-col {
  /* background-color: #fff; */
  color: #fff;
}
i {
  font-size: 18px;
}
.fenye {
  position: fixed;
  bottom: 10px;
}
</style>